<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-row>
                    <el-col>
                        <el-card shadow="hover" class="mgb20">
                            <div class="user-info">
                                <img :src="avatar" class="user-avator" alt="">
                                <div class="user-info-cont">
                                    <div class="user-info-name">{{name}}</div>
                                    <div>{{role}}</div>
                                </div>
                            </div>
                            <div class="user-info-list">上次登录时间：<span>{{time}}</span></div>
                            <div class="user-info-list">上次登录主机：<span>{{ip}}</span></div>
                        </el-card>
                        <!--<el-card shadow="hover">-->
                            <!--<div slot="header" class="clearfix">-->
                                <!--<span>语言详情</span>-->
                            <!--</div>-->
                            <!--Vue-->
                            <!--<el-progress :percentage="57.2" color="#42b983"></el-progress>-->
                            <!--JavaScript-->
                            <!--<el-progress :percentage="29.8" color="#f1e05a"></el-progress>-->
                            <!--CSS-->
                            <!--<el-progress :percentage="11.9"></el-progress>-->
                            <!--HTML-->
                            <!--<el-progress :percentage="1.1" color="#f56c6c"></el-progress>-->
                        <!--</el-card>-->
                    </el-col>
                </el-row>
            </el-col>
           
        </el-row>
    </div>
</template>

<script>
import { userInfo } from 'os';
    export default {
        data() {
            return {
                name: '',
                ip:'家里',
                time:'暂无',
                todoList: [

                ],
              quest_count:'0',
              coment_count:'0',
              doctor_count:'0',
              avatar:'',
            }
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
         created(){
            const userMap = JSON.parse(sessionStorage.getItem("userMap"));
            this.name = userMap.name
           
            this.avatar=JSON.parse(sessionStorage.getItem('userMap')).avatar
             var that = this;
           this.HttpUtil.encryptGet(
            this,
            this.Global.URLPATH.GET_IMG_URL,
            {
            path:userMap.avatarFileName
            },
            function (data) { 
                that.avatar = data.data
            },
            function (data) {//访问失败
              that.$message.error(data.msg);
            });
        },
      methods:{
          init(){
               console.log(111);
          },
        quest(){
            let that = this;
            this.HttpUtil.encryptGet(
              this,
              this.Global.URLPATH.QUEST_TOP,
              {
                hospital :JSON.parse(sessionStorage.getItem('userMap')).hospital,
                token:sessionStorage.getItem("token"),
                pageSize:7,
              },
              function (data) {
                data = JSON.parse(data.data).list;
                var todoList = new Array(5);
                for(var i =0 ;i<=data.length > 5 ? 5 : data.length ; i++){
                  if(data.length == i){
                    break;
                  }
                  data[i].title = data[i].content.length>10 ? data[i].content.substring(0,10) : data[i].content;
                  data[i].status = false;
                }
                that.todoList = data;

              },
              function (data) {//访问失败
                console.log(data)
              });
        },
      },
      mounted : function () {console.log(111);
          this.init();
      },
      watch:{
        $route(newValue, oldValue){
          if(newValue.path == "/dashboard"){
            this.init();
          }
        }
      }
    }

</script>


<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

</style>
